<template>
  <NavBar />
  <van-empty v-if="questionListLength ===0" description="暂无数据" />
  <div id="question" v-if="questionListLength >0">
    <!-- 内容区 -->
    <div style="height: 100%;display: flex;flex-direction: column;margin: .45rem;line-height: 1.85rem;">
      <div>
        <span>第{{active + 1}}题&nbsp;&nbsp;</span>
        <van-tag size="large" type="primary">
          {{question.questionType==="SINGLE" ? '单选题': question.questionType ==="MULTIPLE" ? '多选题' : question.questionType ==="IMAGE" ? '识图题' : question.questionType==="FILL" ? '作答题' : '' }}
        </van-tag>
      </div>
      <!-- 试题内容 -->
      <div style="background-color: #e8e8e8">{{ question.question }}</div>
      <div v-if="question.questionDesc !==''" v-show="question.questionDesc.substr(0,4)==='http'">
        <img style="width:100%" :src="question.questionDesc">
      </div>
    </div>
    <!-- 单选题 -->
    <van-radio-group style="padding: 0 14px;" v-model="question.checkedOpt" v-if="question.questionType !=='MULTIPLE'" @change="changeOptHandle(0, $event)">
      <van-radio style="margin-bottom: 8px;" v-for="option in question.optionList" :name="option.opt">{{ option.opt }}.{{ option.optDesc }}</van-radio>
    </van-radio-group>
    <!-- 多选题 -->
    <van-checkbox-group style="padding: 0 14px;" v-model="checkedOpts" v-if="question.questionType==='MULTIPLE'" @change="changeOptHandle(1, $event)">
      <van-checkbox style="margin-bottom: 8px;" v-for="option in question.optionList" :name="option.opt">{{ option.opt }}.{{ option.optDesc }}</van-checkbox>
    </van-checkbox-group>
    <!-- 答题卡 -->
    <van-action-sheet v-model:show="showAnswerSheet" title="答题卡">
      <van-grid :column-num="5">
        <van-grid-item v-for="index in questionListLength" :key="index" @click="toQuestion(index)">
          <span v-bind:style="{'color':index===active+1 ? 'red' : ''}">第{{ index }}题</span>
        </van-grid-item> 
      </van-grid>
    </van-action-sheet>
    <!-- 解析 -->
    <van-action-sheet v-model:show="showAnalysis" title="解析">
      <span style="font-size: 18px">{{ question.analysis }}</span>
    </van-action-sheet>
    <!-- 操作区 -->
    <div style="height: 50px">
      <div class="handle">
        <van-button block type="primary" :disabled="active===0" @click="preQuestion()">上一题</van-button>
        <van-button block type="success" @click="showAnswerSheet=!showAnswerSheet">答题卡</van-button>
        <van-button block type="success" @click="showAnalysis=!showAnalysis">解析</van-button>
        <van-button block color="linear-gradient(to right, #ff6034, #ee0a24)" @click="dataSubmit">交卷</van-button>
        <van-button block type="primary" :disabled="active === questionListLength-1" @click="nextQuestion()">下一题</van-button>
      </div>
    </div>

    <!-- 考试完毕 -->
    <van-dialog v-model:show="finished" :title="finishedData.examName" @confirm="finishHandle">
      <div style="display: flex;flex-direction: column">
        <span>正确数量：{{finishedData.correctNum}}</span>
        <span>错误数量：{{finishedData.errorNum}}</span>
        <span>正确率：{{finishedData.correctRate}}</span>
        <van-tag type="primary">
          {{finishedData.examType ==="SIMULATION" ? '模拟考试' : question.examType ==="ASSEMBLE" ? '组卷练习' : question.examType ==="EVERYDAY" ? "每日一练" : "章节测试"}}
        </van-tag>
        <span>结束时间：{{finishedData.createDate}}</span>
      </div>
    </van-dialog>
  </div>

</template>

<script>
import { useRoute, useRouter } from "vue-router"
import http from "@/utils/http";
import NavBar from "@/components/layout/nav-bar";
import { onBeforeMount,reactive, ref, toRefs } from "vue";
import { showFailToast, showSuccessToast } from "vant"
export default {
  components:{
    NavBar
  },
  setup(){
    const route = useRoute();
    const router = useRouter();
    const active = ref(0);
    const state = reactive({
      showAnswerSheet: false,
      showAnalysis: false,
      questionListLength: 0,
      //从后台获取的数据
      questionList: [],
      question: {},
      checkedOpts: [],

      //考试完毕
      finished: false,
      finishedData: {}
    })

    onBeforeMount(async ()=> {
      let url= '/exam/question/chapter/list'
      let params = { examId: route.params.id }
      if (route.params.examType ==="SIMULATION"){
        url = '/exam/question/simulation/list'
        params = { paperId: route.params.id }
      }
      http.get(url,{ params: params }).then(({ data: res})=>{
        if (res.code !==0){
          return showFailToast(res.msg)
        }
        state.questionList = res.data;
        state.questionListLength = res.data.length;
        //第一题处理
        state.question = state.questionList[active.value]
      })
    })

    const changeOptHandle=(type,opt)=> {
      if (type===1){
        state.questionList[active.value].checkedOpt = opt.join(",")
      }
    }

    const preQuestion=()=>{
      active.value--;
      state.question = state.questionList[active.value]
    }

    const nextQuestion=()=>{
      active.value++;
      state.question = state.questionList[active.value]
    }

    const toQuestion = (index)=>{
      active.value = index-1;
      state.question = state.questionList[active.value]
      state.showAnswerSheet = false
    }

    const dataSubmit= () =>{
      const dataForm = {
        examId: route.params.id,
        examType: "CHAPTER",
        questionList: state.questionList
      }
      http.post('/exam/record/finish',dataForm).then(({data : res}) =>{
        if (res.code !==0){
          return showFailToast(res.msg)
        }
        state.finishedData = res.data
        state.finished = true
      })
    }

    const finishHandle=()=>{
      showSuccessToast('完成考试！');
      return router.back()
    }

    return {
      active,
      ...toRefs(state),
      changeOptHandle,
      preQuestion,
      nextQuestion,
      toQuestion,
      dataSubmit,
      finishHandle
    }
  }
}
</script>

<style lang="less" scoped>
#question{
  font-size: 18px;
}
.handle{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--van-tabbar-z-index);
  display: flex;
  box-sizing: content-box;
  width: 100%;
  background-color: var(--van-tabbar-background-color);
}

</style>
